<template>
  <div>
    <div class="search">
      <Button type="primary" icon="android-add"  @click="showModal"
              style="margin-top: 4px;">新增产品组</Button>
      <div class="fr">
        <Input v-model="searchScene" placeholder="请输入产品组名称查询"
               style="width: 300px"><Button slot="append" icon="ios-search" @click="handleSearch"></Button></Input>
      </div>

      <div class="fr" style="margin-top: 4px;margin-right: 40px;">
        <span style="margin-right: 10px;">产品组分类</span>
        <Select v-model="productType" @on-change="typeChange"
                style="width:200px" placeholder="请选择产品组分类">
          <Option v-for="item in productTypeList" :value="item.proTypeId" :key="item.proTypeId">{{ item.proTypeName }}</Option>
        </Select>
      </div>


      <Modal
        v-model="addModal"
        title="新建/编辑产品组"
        @on-cancel="cancel">
        <newProductForm v-on:refreshbizlines="refreshList" ref="productForm"></newProductForm>
        <div slot="footer">

        </div>
      </Modal>

    </div>
    <Table border :columns="columns" :data="dataList"></Table>
    <Page :total="pageList.length" size="small"
          :current="pageNum" :pageSize="pageSize"
          @on-change="pageNumChange" @on-page-size-change="pageSizeChange"
          show-total show-elevator show-sizer></Page>
  </div>
</template>

<script>
  import {PROTYPES} from '../../utils/common'
  import newProductForm from './newProductForm.vue'
  export default{
    data: function () {
      return {
        pageNum:1,
        pageSize:10,
        pageList:[],
        addModal:false,
        channel:"",
        productType:'',
        productTypeList:PROTYPES,
        searchScene:'',
        columns: [
          {
            type: 'index',
            title:'序号',
            width:60,
            render(h,obj){
              //return obj.index-0+100
            },
          },
          {
            title: '产品组名称',
            key: 'pgName',
          },
          {
            title: "产品组类型",
            key: 'proType'
          },
          {
            title: "产品组描述",
            key: 'pgDesc'
          },
          {
            title: '创建人',
            key: 'creator'
          },
          {
            title: "创建时间",
            key: 'createTime',
            width:160
          },
          {
            title: "修改时间",
            key: 'updateTime',
            width:160
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'edit'
                  },
                  style: {
                    marginRight: '15px',
                    fontSize:'16px',
                    cursor:'pointer'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row)
                    }
                  }
                }, 'View'),
                h('Poptip',{
                  props: {
                    confirm:true,
                    title:"您确认删除这条内容吗？"
                  },
                  on:{
                    'on-ok':()=>{
                      this.deleteProduct(params.row)
                    }
                  }
                },[
                  h('Icon', {
                    props: {
                      type: 'trash-a'
                    },
                    style:{
                      fontSize:'18px',
                      cursor:'pointer'
                    }
                  }, 'Delete')
                ])
              ]);
            }
          }
        ],
        dataList:[]
      }
    },
    components: {newProductForm},
    methods: {
      showModal(){
        this.addModal = true
        this.$refs.productForm.reset()
      },
      show(index){
        // console.log(index)
      },
      remove(index){
        // console.log(index)
      },
      ok () {
        //点击确定

      },
      cancel () {
        this.addModal= false;
        this.$refs.productForm.reset()
      },
      typeChange(val){
        this.api({
          url: "/product/group/list",
          method: "post",
          params:{
            type:val
          }
        }).then(data => {
          this.pageList = data;
          this.dataList = this.pageList.slice(0,this.pageSize)
        })
      },
      handleSearch(){
        // debugger
        this.api({
          url: "/product/group/list",
          method: "post",
          params:{
            name:this.searchScene
          }
        }).then(data => {
          this.pageList = data;
          this.dataList = this.pageList.slice(0,this.pageSize)
        })
      },
      pageNumChange(pageNum){
        this.pageNum = pageNum
        this.dataList = this.pageList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
      },
      pageSizeChange(pageSize){
        this.pageSize = pageSize
        this.dataList = this.pageList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
      },
      showDetail(row){
        this.api({
          url: "/product/group/detail",
          method: "post",
          params:{
            id:row.id
          }
        }).then(data => {
          this.addModal = true
          this.$refs.productForm.getDetails(data)
        })
      },
      deleteProduct(row){
        this.api({
          url: "/product/group/delete",
          method: "post",
          params:{
            id:row.id
          }
        }).then(data => {
          this.$Message.success('删除客群成功！');
          this.refreshList()
        })
      },

      refreshList(){
        this.api({
          url: "/product/group/list",
          method: "post"
        }).then(data => {
          this.pageList = data;
          this.dataList = this.pageList.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
        })
      }
    },
    created(){
      this.api({
        url: "/product/group/list",
        method: "post"
      }).then(data => {
        this.pageList = data;
        this.dataList = this.pageList.slice(0,this.pageSize)
      })
    },
    mounted() {


    }
  }
</script>

<style lang="scss" scoped>
  .search {
    height: 60px;
  }
  .ivu-input-wrapper {
    margin-top: 4px;
  }

  .ivu-icon-ios-search {
    font-size: 20px;
    color: #FFFFFF;
  }
  .fr {
    float: right;
    margin-right: 20px;
  }

  .ivu-icon.ivu-icon-help-circled{
    left: 10px;
  }
  .ivu-poptip-confirm .ivu-poptip-footer{
    padding: 8px;
    text-align: center;
  }
  .ivu-poptip-confirm .ivu-poptip-body {
    padding: 8px;
  }
  .ivu-poptip-content {
    margin-right: 20px;
  }

</style>
